<template>
  <el-row :gutter="20" id="designProductConsStyle">
    <el-form :model="requestParams" label-width="150px" ref="form" :rules="rules" :disabled="todosDetailed==3?true:false">
      <el-col :span="24">
        <p class="content-style">构件类型</p>
   <el-checkbox-group 
   :disabled="tableData.length==0"
    @change="onChange"
    v-model="requestParams.cop_type">
    <el-checkbox v-for="(item,index) in compTypeArr" :label="item.name" :key="index">{{item.name}}</el-checkbox>
  </el-checkbox-group>
      </el-col>
<el-col :span="24" class="table-box">
<el-table  ref="singleTable"
            stripe
             highlight-current-row
    @current-change="handleCurrentChange"
            style="width: 100%"
            :header-cell-style="{ background: '#f5f5f5' }"
            :data="tableData">
          <el-table-column type="index"
                           label="序号"
                           align="center"
                           width="100"
                           show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="构件类型"
                           prop="struct_type"
                           align="center"
                           show-overflow-tooltip>
                           <!-- <template slot-scope="scope">
                             <el-input :disabled="true" v-model="scope.row.struct_type" size="medium" placeholder="请输入"></el-input>
                           </template> -->
          </el-table-column>
          <el-table-column prop="cop_num"
                           label="构件数量"
                           align="center"
                           show-overflow-tooltip>
                            <template slot-scope="scope">
                             <el-input v-model="scope.row.cop_num" size="medium" placeholder="请输入"></el-input>
                           </template>
          </el-table-column>
          <el-table-column prop="cop_val"
                           label="构件方量"
                           align="center"
                           show-overflow-tooltip>
                            <template slot-scope="scope">
                             <el-input v-model="scope.row.cop_val" size="medium" placeholder="请输入"></el-input>
                           </template>
          </el-table-column>
          <el-table-column prop="cop_weight"
                           label="构件重量"
                           align="center"
                           show-overflow-tooltip>
                            <template slot-scope="scope">
                             <el-input v-model="scope.row.cop_weight" size="medium" placeholder="请输入"></el-input>
                           </template>
          </el-table-column>
          <el-table-column prop="finish_time"
                           label="生产完成时间"
                           align="center"
                           show-overflow-tooltip>
                            <template slot-scope="scope">
                             <el-date-picker
                              v-model="scope.row.finish_time"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="选择日期">
                            </el-date-picker>
                           </template>
          </el-table-column>
          <el-table-column label="操作"
                           width="100px"
                           align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="onDel(scope.row,scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
</el-col>
<el-col :span="24" class="add-style">
<el-button class="el-icon-plus" @click="onAdd"  size="medium">添加</el-button>
</el-col>
<el-col :span="24" class="bottom-box" v-show="todosDetailed==3?false:true">
<!-- <el-button size="medium" @click="onCancel">取消</el-button>  -->
<el-button type="primary" size="medium" @click="onSure('form')">保存</el-button>
</el-col>
    </el-form>
  </el-row>
</template>

<script>
import {DesignManageApi,ProductManageApi} from '@/services/WorkCenter'
import {standardCodeApi} from '@/services/StandardCode'
export default {
  props:{
todosDetailed:Number,
catchBackDetailed:Function,
catchSaveDetailed:Function,
detailObjDetailed:Object
  },
data(){
  return{
    tableIndex:0,
    tableData:[],
    compTypeArr:[],
    designArr:[],
    options:[],
requestParams:{
  cop_type:[],
},
currentRow: null,
rules:{
}
  }
},
methods:{
  setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {    
      // this.requestParams.cop_type=[];//构件类型清空
        this.currentRow = val;
        if(val!=null){       
        this.tableIndex=val.judgeId;//索引
         this.onChange(val.struct_type.split(','));
        };        
       
        console.log('选中某一行-currentRow=',this.currentRow,'this.tableIndex=',this.tableIndex,'val')
      },
  //复选框值改变时触发的事件
  onChange(val){
    if(val.length==1&&val[0]==""){
      this.requestParams.cop_type=[]//重置
    }else{
      this.requestParams.cop_type=val;//回显
    }
    if(this.tableData.length>0){
      this.tableData.forEach(ele=>{
        if(ele.judgeId==this.tableIndex){
          ele.struct_type=val.join(',')
        }
      })
    }
    console.log('复选val=',val,this.compTypeArr,this.tableData)
  },
  getId(){//获取id
    if(this.tableData.length>0){
      var i=0;
      this.tableData.forEach(ele=>{
        this.$set(ele,'judgeId',i);
        i=i+1;
      });
      this.setCurrent(this.tableData[0]);
      }else{
      this.requestParams.cop_type=[]
      }
  },
  //添加
  onAdd(){
this.tableData.push({
  struct_type:'',
  cop_num:0,
  cop_val:'',
  cop_weight:0,
  finish_time:''
});
this.getId();
console.log('数据-tableData=',this.tableData)
  },
  //删除
  onDel(row,indexVal){
    this.tableData.splice(indexVal,1);
    console.log(row,indexVal,this.tableData)
    this.getId();//获取id;
    // if(val.length==1&&val[0]==""){
    //   this.requestParams.cop_type=[]
    // }
  },
  // 获取标准码
    getStandardData () {
    return  standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'jtComponetType'
        }
      }).then((res) => {
        this.compTypeArr= res.data.list
        console.log('标准码res=',res)
      }).catch((error) => {
        console.log(error)
      })
    },
  handleChange(value) {
        console.log(value);
      },
//取消
onCancel(){
this.$refs['form'].resetFields();
this.catchBackDetailed();
},
//确定
onSure(data){
this.$refs[data].validate((valid)=>{
  if(valid){
    if(this.todosDetailed==1){
    ProductManageApi.addDetailed({
      data:{
        id:'1',
        type:this.detailObjDetailed.judgeType,//1:构件生产信息;2:/施工项目;3:构件施工项目
        list:JSON.stringify(this.tableData)
      }
    }).then((res)=>{
      if(res.code==0){
        this.catchSaveDetailed();
      this.$message.success('操作成功')
      }
      
    }).catch((error)=>{
      console.log(error)
    })
    }
  }else{
    console.log('error')
  }
})
},
getProDetail(){//详情
return  DesignManageApi.getProDetail({
    params:{
      id:this.detailObj.jt_project_id,      
    }
  }).then((res)=>{
    this.requestParams=res.data;
    this.requestParams.struct_type=String(this.requestParams.struct_type);
    console.log('详情requestParams=',this.requestParams)
  }).catch((error)=>{
    console.log(error)
  })
},
getOrgList(){//获取组织下拉列表
 return DesignManageApi.getOrgList({
   params:{
    // type:1,//1设计，2生产，3施工
    list_or_tree:'list'//获取list或者tree
   }
 }).then((res)=>{
   this.designArr=[];
   this.designArr=res.data.list;
 }).catch((error)=>{
   console.log(error)
 })
},
},
watch:{//监听
  todosDetailed(n,o){
    if(n==0){
      this.requestParams.cop_type=[];
      this.tableData=[]
      this.$refs['form'].resetFields();
    }else{
      this.getStandardData();//标准码
      this.getOrgList();//设计组织下拉数据
    }
    if(n==2|n==3){
      // this.getProDetail()
    }
console.log('watch-todos=',n,'this.requestParams=',this.requestParams)
  }
},
async created(){
 await this.getStandardData();//获取装配式结构类型
 await  this.getOrgList();//获取组织下拉列表
  if(this.todosDetailed==2|this.todosDetailed==3){
//  await this.getProDetail();//获取详情数据
  }
console.log('created-todos=',this.todosDetailed,'this.requestParams=',this.requestParams)
}
}
</script>

<style lang="scss" scoped>
.table-box{
  margin-top:20px;
  margin-bottom:20px;
}
.bottom-box{
  text-align:right;
  margin-top:4px;
}
.select-style{
  width:100%!important;
}
.content-style{  
margin-bottom:20px;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 600;
line-height: 14px;
color: rgba(0, 0, 0, 0.85);
opacity: 1;
}
.add-style{
  margin-bottom:18px;
}
.add-style /deep/ .el-button--medium{
  width:100%;
}
// /deep/ .el-table__body tr.current-row>td{
//   background-color:#409EFF!important;
// }
</style>